import React, { useEffect, useState } from 'react';
import '../assets/styles/ruler.css';
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';

import { useDispatch } from 'react-redux';
import { setScale } from '../store/userScale';

import Rule from './RulerLine';
import RulerReferenceLine from './RulerReferenceLine';

interface RulerContentProps {
  children: React.ReactNode;
  // 滚动距离（px）
  scrollOffset?: number;
  // 标尺刻度间隔（px）
  rulerInterval?: number;
}

const RulerContent: React.FC<RulerContentProps> = ({ children, rulerInterval = 1 }) => {
  const dispatch = useDispatch();
  const goChartEditLayout = React.createRef<HTMLDivElement>();
  const goSketchRule = React.createRef<HTMLDivElement>();
  const editScreenContainer = React.createRef<HTMLDivElement>();
  const [isShowRuler, setIsShowRuler] = useState(true);
  const [origin, setOrigin] = useState({ horizontal: 0, vertical: 0 });
  // 存储滚动距离的状态（水平/垂直）
  const [scrollOffset, setScrollOffset] = useState({
    horizontal: 0, // 水平滚动距离（scrollLeft）
    vertical: 0, // 垂直滚动距离（scrollTop）
  });

  const hContainer = {
    width: 'calc(100% - 20px)',
    height: 21,
    left: 20,
  };

  const vContainer = {
    width: 21,
    height: 'calc(100% - 20px)',
    top: 20,
  };

  const handleRulerTagget = (e: React.MouseEvent) => {
    e.stopPropagation();
    setIsShowRuler(!isShowRuler);
  };
  useEffect(() => {
    const container = goChartEditLayout.current;
    if (container && goSketchRule.current) {
      // 获取滚动条长度
      const scrollBarWidth = container.clientWidth;
      // 获取滚动条高度
      const scrollBarHeight = container.clientHeight;
      console.log('origin', container.scrollWidth, scrollBarWidth);

      setOrigin({
        horizontal: container.scrollWidth / 2 - scrollBarWidth / 2,
        vertical: container.scrollHeight / 2 - scrollBarHeight / 2,
      });
    }
  }, []);
  useEffect(() => {
    const container = goChartEditLayout.current;
    if (container && goSketchRule.current) {
      // 获取滚动条长度
      const scrollBarWidth = container.clientWidth;
      // 获取滚动条高度
      const scrollBarHeight = container.clientHeight;
      // 取较小比例值为缩放比值，满足缩放比16:9
      const scales = Math.min(goSketchRule.current.clientWidth / 1920, goSketchRule.current.clientHeight / 1080);

      container.scrollLeft = container.scrollWidth / 2 - scrollBarWidth / 2;
      container.scrollTop = container.scrollHeight / 2 - scrollBarHeight / 2 - 15;
      dispatch(setScale(scales));
    }
    if (!container) return;
    const handleScroll = () => {
      setScrollOffset({
        horizontal: container.scrollLeft, // 水平滚动距离
        vertical: container.scrollTop, // 垂直滚动距离
      });
    };

    // 绑定事件
    container.addEventListener('scroll', handleScroll);
    // 组件卸载时解绑
    return () => container.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="n-layout-scroll-container">
      <div className="go-content-box">
        <div className="content content-height-show-top-bottom">
          <div className="go-sketch-rule" ref={goSketchRule}>
            <div id="mb-ruler" className="style-ruler mb-ruler">
              {editScreenContainer && (
                <div className="h-container" style={hContainer}>
                  <Rule
                    direction="horizontal"
                    // length={3840}
                    unit={rulerInterval}
                    scrollOffset={scrollOffset.horizontal}
                    origin={origin.horizontal}
                  />
                  <RulerReferenceLine isShow={isShowRuler} type="horizontal" />
                </div>
              )}
              {editScreenContainer && (
                <div className="v-container" style={vContainer}>
                  <Rule
                    direction="vertical"
                    // length={2160}
                    unit={rulerInterval}
                    scrollOffset={scrollOffset.vertical}
                    origin={origin.vertical}
                  />
                  <RulerReferenceLine isShow={isShowRuler} type="vertical" />
                </div>
              )}
            </div>
            <div className="edit-screens" ref={goChartEditLayout}>
              <div className="edit-screen-container" ref={editScreenContainer}>
                {children}
              </div>
            </div>
            <div className="corner" onClick={(e) => handleRulerTagget(e)}>
              {isShowRuler && <EyeOutlined style={{ fontSize: '20px', color: '#999' }} />}
              {!isShowRuler && <EyeInvisibleOutlined style={{ fontSize: '20px', color: '#999' }} />}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default RulerContent;
